<template>
	<view>
		<u-navbar>
			<view style="display: flex;justify-content: center;align-items: center; padding-left: 30rpx;">
				<!-- <view class="u-p-20" @click="location">
					{{ vuex_city == '' ? '选择' : vuex_city }}
					<u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon>
				</view> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="navtitle">
					家政护理
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false"
					:clearabled="true" :disabled="true" style="width: 580rpx;" @click="search"></u-search> -->
				<!-- #endif -->
			</view>
		</u-navbar>
		<view class="funtion">
			<view class="serch">
				<u-search placeholder="搜索" v-model="keyword" :show-action="false" bgColor="white"
					height="80"></u-search>
			</view>
			<view class="tablist">
				<view class="tablist_item">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="3">
							<view class="icon_sqre" @click="gotakeCare">
								<image :src="'/static/img/housekeeper/1.svg'" class="icon" />
							</view>
							<view class="icon_name">
								生活照料
							</view>
						</u-col>
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/2.svg'" class="icon" />
							</view>
							<view class="icon_name">
								临床护理
							</view>
						</u-col>
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/3.svg'" class="icon" />
							</view>
							<view class="icon_name">
								康复护理
							</view>
						</u-col>
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/4.svg'" class="icon" />
							</view>
							<view class="icon_name">
								心理关怀
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="tablist_item">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/5.svg'" class="icon" />
							</view>
							<view class="icon_name">
								上门做饭
							</view>
						</u-col>
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/6.svg'" class="icon" />
							</view>
							<view class="icon_name">
								健康管理
							</view>
						</u-col>
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/7.svg'" class="icon" />
							</view>
							<view class="icon_name">
								陪同就医
							</view>
						</u-col>
						<u-col span="3">
							<view class="icon_sqre">
								<image :src="'/static/img/housekeeper/8.svg'" class="icon" />
							</view>
							<view class="icon_name">
								日常清洁
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="adlist">
			<view class="top">
				<view class="navtitle">限时优惠</view>
				<view>
					<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
				</view>
			</view>
			<view class="show">

			</view>
		</view>
		<view class="likelist">
			<view class="navtitle">
				为您推荐
			</view>
		</view>
	</view>
</template>

<script>
export default {
	//Component Object
	data() {
		return {
			keyword: '',
			timeData: {},
		}
	},
	methods: {
		onChange(e) {
			this.timeData = e
		},
		gotakeCare() {
			this.$u.route({
				url: '/pages/housekeeperOrder/takecare',
				params: {

				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.time {
	//@include flex;
	align-items: center;

	&__item {
		color: #fff;
		font-size: 12px;
		text-align: center;
	}
}

.navtitle {
	font-size: 40rpx;
}

.funtion {
	.serch {
		margin: 40rpx 20rpx 40rpx 40rpx;
	}

	.tablist {
		.tablist_item {
			margin-bottom: 20rpx;
		}

		.icon_sqre {
			width: 120rpx;
			height: 120rpx;
			background-color: white;
			border-radius: 26rpx;
			text-align: center;
			padding-top: 25rpx;
			margin: auto;
		}

		.icon_name {
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: center;
		}

		.icon {
			width: 70rpx;
			height: 70rpx;
		}
	}
}

.adlist {
	margin: 40rpx 40rpx 40rpx 40rpx;
	height: 500rpx;
	background: linear-gradient(to bottom, #b6bbf7, white);
	padding:40rpx;
	border-radius: 30rpx;
	.top {
		display: flex;
	}
}

.likelist {
	padding-left: 40rpx;
}
</style>
